﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="/CSS/Main.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="/Content/lib/iview/styles/iview.css">
    <script src="/UserCotrols/My97DatePicker/WdatePicker.js"></script>
    <script src="/Content/lib/vue/vue-2.5.17.min.js"></script>
    <script src="/Content/lib/axios/axios.js"></script>
    <script type="text/javascript" src="/Content/lib/iview/iview.min.js"></script>
    <script src="/Scripts/jquery.1.11.1.js"></script>
    <script src="/Scripts/Thk.Utility.js"></script>
    <script src="/Scripts/Thk.Component.js"></script>
    <script type="text/javascript">
        //构造Web程序入口
        window.onload = function () {
            var app = new Vue({
                el: "#app",
                data: {
                    formItem: {
                        FORM_COMPANY_ID: null,
                        COMPANY_DATA: []
                    },
                    LOAD_STATUS: true,
                    D_SWITCH: false,
                    PG: {
                        CURRENT_PAGE: 1,
                        MAX_SIZE: 1,
                        PAGE_SIZE: 40,
                        LODING: false,
                        DATA: [],
                        COLUMNS: [
                            {
                                type: 'index',
                                title: "序号",
                                align: "center",
                                width: 60,
                                sortable: true
                            }
                            ,
                            {
                                title: "二维码名称",
                                key: "NAME",
                                minWidth: 200,
                                tooltip: true
                            }
                            ,
                            {
                                title: "二维码字符串",
                                key: "CODE",
                                minWidth: 200,
                                tooltip: true
                            }
                            ,
                            {
                                title: "操作人",
                                key: "OPEAR_NAME",
                                minWidth: 200
                            },
                            {
                                title: "操作时间",
                                key: "OPEAR_DATE",
                                width: 105,
                                align: "center",
                                render: function (h, params) {
                                    //console.log(params);
                                    var date = new Date(params.row.OPEAR_DATE);
                                    //console.log(params.row.D_TRANDATE);
                                    return h('div', date.format("yyyy-MM-dd"));
                                }
                            },
                            {
                                title: "操作",
                                width: 150,
                                align: "center",
                                render: function (h, params) {
                                    return h('div', [
                                        h('Button', {
                                            props: {
                                                type: 'primary',
                                                size: 'small'
                                            },
                                            style: {
                                                marginRight: '5px'
                                            },
                                            on: {
                                                click: () => {
                                                    window.App.EDIT(params.row);
                                                }
                                            }
                                        }, '修改'),
                                        h('Button', {
                                            props: {
                                                type: 'error',
                                                size: 'small'
                                            },
                                            on: {
                                                click: () => {
                                                    window.App.DELETE(params.row);
                                                }
                                            }
                                        }, '删除')
                                    ]);
                                }
                            }
                        ]
                    },
                    Entity: {
                        NAME: "",
                        CODE: "",
                        ID: null
                    }
                },
                methods: {
                    COMPANY_CHANGE: function () {
                        var that = this;
                        if (that.D_SWITCH) {
                            return;
                        }
                        that.QUERY_CLICK(true);
                    },
                    LOAD_COMPANY: function () {
                        var that = this;
                        //同步获取
                        var data = top.window.AllCompanyInfo;
                        if (data == undefined) {
                            $.ajax({
                                async: false,
                                url: "/Module/ApplyView/ApplyHandler.ashx?MethodType=AllCompanyInfo",
                                type: "POST",
                                success: function (result) {
                                    //console.log(result);
                                    if (result.Type != 1) {
                                        return;
                                    }
                                    data = result.Data;
                                    top.window.AllCompanyInfo = data;
                                }
                            });
                        }
                        for (var i = 0; i < data.length; i++) {
                            var company = data[i];
                            that.formItem.COMPANY_DATA.push({ Text: company.Name, Value: company.Id });
                        }
                        if (data.length > 0) {
                            that.formItem.FORM_COMPANY_ID = data[0].Id;
                        }
                        else {
                            that.formItem.FORM_COMPANY_ID = null;
                        }
                    },
                    QUERY_CLICK: function (ifFirst) {
                        var that = this;
                        if (that.formItem.FORM_COMPANY_ID == null) {
                            return;
                        }
                        that.PG.LODING = true;
                        if (ifFirst) {
                            that.PG.CURRENT_PAGE = 1;
                        }
                        //拼接条件
                        var data = {};
                        data.Type = "GET_PAGE";
                        data.COMPANY_ID = that.formItem.FORM_COMPANY_ID;
                        data.PAGE_SIZE = that.PG.PAGE_SIZE;
                        data.CURRENT_PAGE = that.PG.CURRENT_PAGE;
                        axios.post("/FUNDS/BANK_QRCODE.aspx?TYPE=API", JSON.stringify(data))
                            .then(result => {
                                that.PG.LODING = false;
                                if (result.status != 200) {

                                    return;
                                }
                                console.log(result.data);
                                var data = result.data;
                                if (ifFirst) {
                                    that.PG.MAX_SIZE = data.Data.Count;
                                }
                                that.PG.DATA = data.Data.Data;
                            });
                    },
                    PAGE_SIZE_CHANG: function (size) {
                        //this.FORM_DATA.CURRENT_PAGE = size;
                        //this.SELECT(false);
                        this.PG.PAGE_SIZE = size;
                        this.SELECT(true);
                    },
                    PAGE_CHANGE: function (size) {
                        this.PG.CURRENT_PAGE = size;
                        this.SELECT(false);
                    },
                    ADD_CLICK: function () {
                        var that = this;
                        if (that.formItem.FORM_COMPANY_ID == null || that.formItem.FORM_COMPANY_ID=="") {
                            return;
                        }
                        var entity = {};
                        entity.ID = null;
                        entity.NAME = that.Entity.NAME;
                        entity.CODE = that.Entity.CODE;
                        entity.COMPANY_ID = that.formItem.FORM_COMPANY_ID;
                        var data = {};
                        data.Type = "ADD";
                        data.Data = entity;
                        axios.post("/FUNDS/BANK_QRCODE.aspx?TYPE=API", JSON.stringify(data))
                            .then(result => {
                                if (result.status != 200) {

                                    return;
                                }
                                that.$Modal.info({
                                    title: '提示',
                                    content: '添加成功'
                                });
                                that.QUERY_CLICK(false);
                            });
                    },
                    UPDATE_CLICK: function () {
                        var that = this;
                        if (that.formItem.FORM_COMPANY_ID == null || that.formItem.FORM_COMPANY_ID == "") {
                            return;
                        }
                        if (that.Entity.ID == null || that.Entity.ID == "") {
                            return;
                        }
                        var entity = {};
                        entity.ID = that.Entity.ID;
                        entity.NAME = that.Entity.NAME;
                        entity.CODE = that.Entity.CODE;
                        entity.COMPANY_ID = that.formItem.FORM_COMPANY_ID;
                        var data = {};
                        data.Type = "SAVE";
                        data.Data = entity;
                        axios.post("/FUNDS/BANK_QRCODE.aspx?TYPE=API", JSON.stringify(data))
                            .then(result => {

                                if (result.status != 200) {

                                    return;
                                }
                                that.QUERY_CLICK(false);
                                that.$Modal.info({
                                    title: '提示',
                                    content: '修改成功'
                                });
                            });
                    },

                    EDIT: function (entity) {
                        console.log(entity);
                        var that = this;
                        that.Entity.NAME = entity.NAME;
                        that.Entity.CODE = entity.CODE;
                        that.Entity.ID = entity.ID;
                        that.D_SWITCH = true;
                    },
                    DELETE: function (entity) {
                        var that = this;
                        var data = {};
                        data.Type = "DELETE";
                        data.ID = entity.ID;
                        axios.post("/FUNDS/BANK_QRCODE.aspx?TYPE=API", JSON.stringify(data))
                            .then(result => {
                                if (result.status != 200) {

                                    return;
                                }
                                that.$Modal.info({
                                    title: '提示',
                                    content: '移除成功'
                                });
                                that.QUERY_CLICK(false);
                            });
                    }
                },
                mounted: function () {
                    var that = this;
                    window.App = that;
                    that.LOAD_COMPANY();
                    that.QUERY_CLICK(true);
                    setTimeout(function () {
                        that.LOAD_STATUS = false;
                    }, 500);
                }
            });
        };
    </script>
</head>
<body>
    <div class="Window" style="min-width: 1100px;padding:40px;" id="app">
        <div style="margin:0 auto;border:1px solid #0094ff;border-radius:5px;padding:20px;margin-top:20px;">
            <template>
                <i-form :model="formItem" :label-width="100">
                    <row style="color:#464c5b;font-size:16px;text-align:center;padding-bottom:20px;">
                        主营业收入二维码设置
                    </row>
                    <row>
                        <i-col span="12">
                            <form-item label="公司：">
                                <i-select v-model="formItem.FORM_COMPANY_ID" @on-change="COMPANY_CHANGE" placeholder="请选择公司" style="max-width:300px;">
                                    <template v-for="item in formItem.COMPANY_DATA">
                                        <i-option :value="item.Value">{{item.Text}}</i-option>
                                    </template>
                                </i-select>
                            </form-item>
                        </i-col>
                    </row>
                    <form-item label="详情：">
                        <i-switch v-model="D_SWITCH">
                            <span slot="open">开</span>
                            <span slot="close">关</span>
                        </i-switch>
                    </form-item>
                    <row v-if="D_SWITCH" style="border-top:1px solid #0094ff;padding-top:20px;">
                        <i-col span="12">
                            <form-item label="二维码名称：">
                                <i-input style="width:300px;" v-model="Entity.NAME"></i-input>
                            </form-item>
                        </i-col>
                        <i-col span="12">
                            <form-item label="二维码字符串：">
                                <i-input style="width:300px;" v-model="Entity.CODE"></i-input>
                            </form-item>
                        </i-col>
                    </row>
                    <form-item>
                        <i-Button type="primary" v-if="!D_SWITCH" @click="QUERY_CLICK">查询</i-Button>
                        <i-Button type="success" v-if="D_SWITCH" @click="ADD_CLICK">添加</i-Button>
                        <i-Button type="success" v-if="D_SWITCH" style="margin-left:20px;" @click="UPDATE_CLICK">保存</i-Button>
                    </form-item>
                </i-form>
                <row v-if="PG.DATA.length>0" style="border-top:1px solid #0094ff;padding-top:20px;">
                    <i-table :loading="PG.LODING" :data="PG.DATA" size="small" border :columns="PG.COLUMNS">
                    </i-table>
                    <Page style="margin-top:20px;" show-sizer :total="PG.MAX_SIZE" :page-size="PG.PAGE_SIZE" :current="PG.CURRENT_PAGE" @on-page-size-change="PAGE_SIZE_CHANG" @on-change="PAGE_CHANGE" />
                </row>
                <Spin size="large" fix v-if="LOAD_STATUS"></Spin>
            </template>
        </div>
    </div>
</body>
</html>